<template>
	<view class="content">
		<navTop :title="navtop.title" :isHeight="false" :tipsShow="false" hasBgc="#fff" :color="navtop.color" :isBack="true" ></navTop>
		<view class="content-box" :style="{paddingTop:barHeight+'rpx'}">
			<text>New Post</text>
			<view class="content-box__btn" @click="submitInfo">
				Post
			</view>
		</view>
		<view class="content-box__inputs">
			<textarea type="textarea" v-model="content"
			auto-height="true"
			placeholder-class="a"
			class="content-input" placeholder="Write a caption ..."/>
			<view class="content-imgs">
				<view class="content-imgs__item" v-for="(v, i) in imgList" :key='i'>
					<image :src="v" mode="" class="content-imgs__img"></image>
					<icon type="cancel" size="26" class="content-imgs__cancel" @click="deleteImg(i)"/>
				</view>
				<view class="content-add content-imgs__item" @click="upload">
					<image :src="iconAdd" mode="" class="content-add__icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import navTop from '@/components/nav-title.vue';
import iconAdd from '@/static/icon_add.png';

	export default {
		components: {
			navTop
		},
		data() {
			return {
				iconAdd,
				content: '',
				barHeight: 0,
				navtop: {
					title: 'New Post',
					color: '#000'
				},
				imgList: []
			}
		},
		onLoad() {

		},
		created() {
			this.isBarHeight999().then((statusBarHeight)=>{
				this.barHeight = statusBarHeight + 180
			})
		},
		methods: {
			async upload() {
				if (this.imgList.length >= 9) {
					uni.showToast({
						icon: 'none',
						title: '最多上传9张图片',
						duration: 3000
					})
					return false
				}
				const data = await this.$uploadImg()
				this.imgList.push(data.filePath)
			},
			deleteImg(i) {
				this.imgList = this.imgList.filter((v, index) => {
					console.log(i, index)
					return i != index
				})
			},
			submitInfo() {
				if (!this.content) {
					uni.showToast({
						icon: 'none',
						title: '请先填写内容',
						duration: 3000
					})
					return false
				}
				this.$http('post', '/app/saveDynamic', {
					content: this.content,
					imgUrls: this.imgList.join()
				}, {
						'Content-Type': 'application/x-www-form-urlencoded'
					}).then((res) => {
					if (res.success) {
						uni.showToast({
							icon: 'none',
							title: '信息发布完成,请等待审核',
							duration: 3000
						})
						this.content = ''
						this.imgList = []
					}
				})
			}
		}
	}
</script>

<style lang="less">
.content {
	background-color: #FBFCFE;
	padding: 0 30px;
	min-height: 100vh;
}
.content-box {
	font-size: 40rpx;
	font-family: Helvetica-Bold, Helvetica;
	font-weight: bold;
	color: #1F1F1F;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 34rpx;
	.content-box__btn {
		display: inline-block;
		padding: 16rpx 32rpx;
		font-size: 28rpx;
		color: #fff;
		background: #0078FF;
		border-radius: 18px;
	}
}
.content-box__inputs {
	min-height: 690rpx;
	position: relative;
	background: #FFFFFF;
	box-shadow: 0px 4px 12px 0px rgba(55, 58, 64, 0.08);
	border-radius: 8rpx; 
	.a{
		position: absolute;
		top: 0;
		left: 0;
	}
	.content-input {
		min-height: 500rpx;
		width: 100%;
		padding: 24rpx 40rpx;
		box-sizing: border-box;
	}
	.content-imgs {
		padding-left: 40rpx;
		padding-bottom: 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		.content-imgs__item {
			max-width: 170rpx;
			max-height: 190rpx;
			margin-right: 12rpx;
			position: relative;
		}
		.content-imgs__img {
			max-width: 170rpx;
			max-height: 190rpx;
		}
		.content-imgs__cancel {
			position: absolute;
			top: 0;
			right: 0;
			transform: translate(10%, -4%);
		}
	}
	.content-add{
		width: 190rpx;
		height: 190rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 2px;
		background-color: #F0F1F3;
		z-index: 999;
	}
	.content-add__icon{
		width: 40rpx;
		height: 40rpx;
	}
}

</style>
